<template>
    <div class="main">
        <van-tabs v-model="active">
            <van-tab v-for="(item,index) in tabs" :key="index" :title="item">
                
                <div class="upload">
                    <div class="picupload">
                        
                        <i class="iconfont icon-Excel"></i>
                    </div>
                    <h4>*请上传Excel文件或图片</h4>
                    <h4>使用电脑版微信可快速上传</h4>
                    
                    <van-button type="primary" @click="fileopen" size="large" class="pub">提交文件</van-button>
                    <div>
                        <input type="file" name="file" id="file" @change="fileupdate" ref="inputer" accept="*" v-show="false">
                        
                    </div>

                </div>
            </van-tab>
        </van-tabs>
        <van-number-keyboard :show="showNum" extra-key="." close-button-text="完成" @blur="showNum = false" @input="onInput" @delete="onDelete" />
        <van-popup v-model="showPop" position="bottom">
            <ul class="pop">
                <li v-for="(li,index) in CZFS" :key="index" @click="czfsSel(li)">{{li.name}}</li>
            </ul>
        </van-popup>
        <van-popup v-model="showSellTypePop" position="bottom">
            <ul class="pop">
                <li v-for="(li,index) in SellType" :key="index" @click="selltypeSel(li)">{{li.name}}</li>
            </ul>
        </van-popup>
        <van-popup v-model="showContractPop" position="bottom">
            <ul class="pop">
                <li v-for="(li,index) in Contract" :key="index" @click="contractSel(li)">{{li.name}}</li>
            </ul>
        </van-popup>
        <div class="weixin">
            <div>
                <h3>客服1号</h3>
                <img @click="swipeteImage(0)" src="../assets/kf1.jpg" alt="">

            </div>
            <div>
                <h3>客服2号</h3>
                <img @click="swipeteImage(1)" src="../assets/kf2.jpg" alt="">
            </div>
            <div>
                <h3>客服3号</h3>
                <img @click="swipeteImage(2)" src="../assets/kf3.jpg" alt="">
            </div>
        </div>

    </div>
</template>

<script>
import api from "@/api/api";
import { Dialog, Toast, ImagePreview } from "vant";
export default {
  data() {
    return {
      active: 0,
      // tabs: ['手动发布', '客服代发'],
      tabs: ["Excel上传"],
      b: {
        BatchNo: "",
        CZFS: 0,
        SellType: 0,
        SellPrice: 0,
        Contract: 0,
        SellJC: 0
      },
      c: {
        //选项的名称
        CZFS: "",
        SellType: "",
        Contract: ""
      },
      file: [],
      CZFS: [
        {
          name: "手摘棉",
          value: 1
        },
        {
          name: "机采棉",
          value: 2
        },
        {
          name: "皮辊棉",
          value: 3
        },
        {
          name: "长绒棉",
          value: 4
        }
      ],
      SellType: [
        {
          name: "一口价",
          value: 1
        },
        {
          name: "基差交易",
          value: 2
        }
      ],
      Contract: [
        {
          name: "郑棉1809",
          value: 1
        },
        {
          name: "郑棉1901",
          value: 2
        },
        {
          name: "郑棉1905",
          value: 3
        }
      ],
      showNum: false,
      showPop: false,
      showSellTypePop: false,
      showContractPop: false
    };
  },
  created() {
    this.b.EntName = this.$store.state.userInfo.EntName;
    this.b.LinkMan = this.$store.state.userInfo.XM;
    this.b.Tel = this.$store.state.userInfo.phoneno;
  },
  methods: {
    
    swipeteImage(index) {
      var img1 = require('../assets/kf1.jpg');
      var img2 = require('../assets/kf2.jpg');
      var img3 = require('../assets/kf3.jpg');
      ImagePreview({
        images: [img1,img2,img3],
        startPosition: index,
        showIndex:true,
        onClose() {
          // do something
        }
      });
    },
    onInput(e) {
      this.b.BatchNo += e;
    },
    onDelete() {
      this.b.BatchNo = this.b.BatchNo.substr(0, this.b.BatchNo.length - 1);
    },
    // itemClick(v) {
    //     this.b.CZFS = v;
    // },
    pub() {
      let data = {
        cFactorybatchno: this.b.BatchNo,
        SellEntName: this.$store.state.userInfo.EntName,
        SellEntID: this.$store.state.userInfo.EntID,
        SellStorage: this.b.Storage,
        CZFS: this.c.CZFS,
        SellType: this.b.SellType,
        // SellPrice: this.b.SellPrice,
        Contract: this.c.Contract,
        SellJC: this.b.SellJC,
        LinkMan: this.b.LinkMan,
        LinkTel: this.b.Tel,
        OpenID: this.$store.state.userInfo.OpenID
      };
      if (this.b.SellType == 1) {
        data["SellPrice"] = this.b.SellPrice;
      }
      api.AddBatch(data).then(re => {
        if (re.success == true) {
          Dialog.alert({
            title: "提示",
            message: "发布成功，请等待审核！"
          }).then(() => {
            // on close
          });
        } else {
          Dialog.alert({
            title: "提示",
            message: "发布失败！"
          }).then(() => {
            // on close
          });
        }
      });
    },
    selPop() {
      this.showPop = true;
      document.activeElement.blur();
    },
    czfsSel(item) {
      this.b.CZFS = item.value;
      this.c.CZFS = item.name;
      this.showPop = false;
    },
    wuli() {
      let inputDOM = this.$refs.inputer;
      console.log(inputDOM);
      // 通过DOM取文件数据
      this.file = inputDOM[0].files[0];
      console.log(inputDOM[0].files[0]);
      if (inputDOM[0].files.length > 0) {
        Toast("请点击提交文件按钮");
      }
    },
    fileopen: function() {
      if(this.$store.state.userInfo.isBlack)
      {return;}
      var fileSelect = document.getElementById("file");
      fileSelect.click();
    },
    fileupdate: function() {
      if (!this.$store.state.userInfo.ID) {
        Toast("请先登录");
        return false;
      }
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据

      if (inputDOM[0].files.length == 0) {
        Dialog.alert({
          title: "提示",
          message: "请选择Excel文件或图片上传！"
        }).then(() => {
          return false;
        });
      }
      this.file = inputDOM[0].files[0];
      // alert(inputDOM[0].files[0].name)
      // alert(inputDOM[0].files[0].size)
      var formdata = new FormData();
      formdata.append("file", inputDOM[0].files[0]);
      let data = {
        EntID: this.$store.state.userInfo.EntID,
        EntName: this.$store.state.userInfo.EntName,
        UserName: this.$store.state.userInfo.XM,
        UserID: this.$store.state.userInfo.ID
      };
      formdata.append("data", JSON.stringify(data));
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      Toast.loading({
        mask: true,
        message: "正在上传..."
      });
      this.$http
        .post("/addAttach", formdata, config)
        .then(function(res) {
          Toast.clear();
          if (res.data.success) {
            Dialog.alert({
              title: "提示",
              message: "上传成功，请等待处理！"
            }).then(() => {
              var fileSelect = document.getElementById("file");
              fileSelect.value = "";
            });
          } else {
            Toast.fail(res.data.data);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    onRead(file) {
      console.log(file);
      var that = this;
      let formData = new FormData();
      let data = {
        fileName: file.file.name,
        content: file.content,
        size: file.file.size,
        EntID: this.$store.state.userInfo.EntID,
        EntName: this.$store.state.userInfo.EntName,
        UserName: this.$store.state.userInfo.XM,
        UserID: this.$store.state.userInfo.ID
      };
      // formData.append('file', file.content);
      // formData.append('EntID', data.EntID);
      // formData.append('EntName', data.EntName);
      // formData.append('UserName', data.UserName);
      // formData.append('UserID', data.UserID);
      // formData.append('file', JSON.stringify(data));
      formData.append("file", file.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      console.log(file.file);
      that.$http.post("/addAttach", formData, config).then(function(res) {
        // that.fileNames.push(res.data.data);
        // that.fileList.push(that.webUrl + res.data.data);
      });
    },
    selSellTypePop() {
      this.showSellTypePop = true;
      document.activeElement.blur();
    },
    selltypeSel(item) {
      this.b.SellType = item.value;
      this.c.SellType = item.name;
      this.showSellTypePop = false;
    },
    selContractPop() {
      this.showContractPop = true;
      document.activeElement.blur();
    },
    contractSel(item) {
      this.b.Contract = item.value;
      this.c.Contract = item.name;
      this.showContractPop = false;
    }
  }
};
</script>

<style scoped lang='less'>
.main {
  background: #f0f0f0;
  .weixin {
    padding-left: 5px;
    > div {
      display: inline-block;
    }
    img {
      width: 6rem;
      height: 6rem;
      margin-right: 1em;
    }
  }
  .upload {
    padding-top: 10%;
    position: relative;
    h4 {
      line-height: 2em;
      height: 2em;
    }
    .files {
      margin: 2em 0;
      opacity: 0;
      .van-icon {
        font-size: 6rem;
      }
      width: 40%;
    }
    .iconfont {
      position: absolute;
      left: 35%;
      color: #999;
      right: 35%;
      font-size: 4rem;
      border: 2px solid #999;
      border-radius: 10px; // pointer-events: none;
    }
    .picupload {
      overflow: hidden;
      height: 7rem;
    }
  }
  .form {
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
    font-size: 14px;
    text-align: left;
    li {
      background: #fff;
      display: flex;
      > span {
        display: inline-block;
        margin-left: 15px;
        max-width: 90px;
        flex: 1;
      }
      > div {
        flex: 1;
        > div {
          display: inline-block;
        }
      }
      i {
        color: #2cb98e;
        margin-right: 3px;
      }
      line-height: 3em;
      height: 3em;
      border-bottom: 1px solid #e5e5e5;
    }
    .radio {
      display: inline-block;
      .van-radio {
        display: inline-block;
      }
    }
  }
  .pub {
    width: 80%;
    margin: 2em auto;
    background: #2cb98e;
    border: 1px solid #2cb98e;
  }
  .pop {
    li {
      border-bottom: 1px solid #f0f0f0;
      line-height: 3rem;
      text-align: center;
    }
    li.different {
      color: #f0f0f0;
    }
    i {
      color: #999;
    }
    .active {
      color: #99c51d;
    }
    span {
      font-size: 18px;
    }
  }
}
</style>